<template>
  <div>
    <!-- 主表-->
    <div>
    <el-table
    :data=tableData
    style="width: 100%">
      <el-table-column
        label="Id"
        prop="postId">
      </el-table-column>
      <el-table-column
        label="Title"
        prop="postTitle">
      </el-table-column>
      <el-table-column
        label="Author"
        prop="postAuthor">
      </el-table-column>
    <el-table-column
      label="date"
      prop="postTime">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="author"
          size="mini"
          placeholder="输入作者名字"
          v-on:input ="getData()"
        />
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <!-- 分页工具-->
    <div id="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3,5,7]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  list,
  remove
} from '../../../api/post'
import { Message } from 'element-ui'

export default {
  data () {
    return {
      author: '',
      tableData: '',
      currentPage: 1,
      PageSize: 5,
      Total: 10,
      editState: false,
      dialogFormVisible: true
    }
  },
  methods: {
    handleEdit (index, row) {
      this.$router.push({name: 'edit',
        query: {title: row.postId,
          state: '编辑',
          content: row.postTitle,
          author: row.postAuthor,
          time: row.postTime,
          id: row.postId}})
    },
    handleDelete (index, row) {
      const para = {
        id: row.postId
      }
      remove(para).then(res => {
        Message({
          message: res.data,
          type: 'success',
          duration: 5 * 1000
        })
        this.getData()
      })
    },
    getData () {
      const para = {
        author: this.author,
        currentPage: this.currentPage,
        pageSize: this.PageSize
      }
      list(para).then(res => {
        this.tableData = res.data.data
        this.Total = res.data.total
      })
    },
    handleSizeChange (val) {
      this.PageSize = `${val}`
      this.getData()
    },
    handleCurrentChange (val) {
      this.currentPage = `${val}`
      this.getData()
    }
  },
  mounted () {
    // 实现自动加载
    this.getData()
  }
}
</script>

<style scoped>

</style>
